<template>
	<div class="add-goods table-theme" v-if="goodsInfo">
		<head-back-title title="编辑商品"></head-back-title>
		<el-card>
			<el-form :model="goodsInfo" :rules="goodsRules" ref="goodsInfo" label-width="90px">
				<p class="title" style="font-size: 20px;">商品信息</p>
				<div class="goods-info">
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="商品名称:" prop="store_goods_name">
								<el-input v-model="goodsInfo.store_goods_name" placeholder="请输入商品名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="自营价:" prop="self_price">
								<el-input v-model.trim="goodsInfo.self_price" placeholder="请输入内容" @input="onUpPrice('self',$event)"><i slot="suffix">元</i></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="商品编号:" prop="store_goods_sn">
								<el-input v-model="goodsInfo.store_goods_sn" placeholder="请输入平台款号"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="库存:" prop="num">
								<el-input v-model.trim="goodsInfo.num" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="排序:" prop="sort">
								<el-input v-model.trim="goodsInfo.sort" placeholder="请输入排序"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="划线价:" prop="market_price">
								<el-input v-model.trim="goodsInfo.market_price" type="number" placeholder="请输入内容" @input="onUpPrice('market',$event)"><i slot="suffix">元</i></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="零售价:" prop="retail_price">
								<el-input v-model.trim="goodsInfo.retail_price" type="number" placeholder="请输入内容" @input="onUpPrice('retail',$event)"><i slot="suffix">元</i></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="品类分类:" prop="class_id">
								<el-select v-model="goodsInfo.class_id" placeholder="请选择">
									<el-option v-for="item in ClassList" :key="item.class_id" :label="item.class_name" :value="item.class_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="商品类型:" prop="goods_type">
								<el-select v-model="goodsInfo.goods_type" placeholder="请选择" @change="onSetActivityPrice">
									<el-option v-for="(item,index) in goodsTypeList" :key="index" :value="item.value" :label="item.label"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="套餐类型:" prop="type">
								<el-select v-model="goodsInfo.type" placeholder="请选择">
									<el-option value="1" label="商品"></el-option>
									<el-option value="2" label="套餐的单品"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="是否免邮:" prop="free_express">
								<el-select v-model="goodsInfo.free_express" placeholder="请选择">
									<el-option :value="0" label="不免邮"></el-option>
									<el-option :value="1" label="免邮"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6" v-if="goodsInfo.goods_type === 4">
						  <el-form-item label="活动价:" prop="activity_price">
							  <el-input v-model="goodsInfo.activity_price" type="number" placeholder="请输入活动价" @input="onUpPrice('activity',$event)"><i slot="suffix">元</i></el-input>
						  </el-form-item>
					  </el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="14">
							<el-form-item label="商品简介:" prop="brief">
								<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="goodsInfo.brief"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div class="more-parameter-title">
						<p class="title">更多商品信息</p>
						<p class="el-icon-circle-plus-outline" @click="addParameter"></p>
					</div>
					<div class="more-parameter">
						<div class="parameter-item" v-for="(item, index) in parameter" :key="index">
							<div>
								<el-form-item label="参数名:" prop="">
									<el-input v-model="item.parameter_key" placeholder="例如货期"></el-input>
								</el-form-item>
								<el-form-item label="参数值:" prop="">
									<el-input v-model="item.parameter_value" placeholder="10天"></el-input>
								</el-form-item>
							</div>
							<span class="el-icon-circle-close" @click="delParameter(index)"></span>
						</div>
					</div>
					<div class="add-sku-view">
						<p class="title" style="font-size: 20px;">商品SKU</p>

						<div class="add-sku-form">
							<el-form :model="CreateSkuForm" status-icon :rules="CreateSkuRules" ref="CreateSkuForm" label-width="100px">
								<div class="add-sku-form-item" style="margin-top: 20px; margin-bottom: 10px;">
									<el-form-item label="" prop="name_color">
										<el-input v-model="CreateSkuForm.name_color" disabled></el-input>
									</el-form-item>
								</div>
								<div class="add-sku-form-item">
									<el-form-item label="" prop="color">
										<el-input v-for="(size, index) in colorList" :key="index" v-model="size.value"></el-input>
									</el-form-item>
									<div class="add-sku-form-menu">
										<span @click="addInput(1)">+添加</span>
										<span @click="reset(1)">重置</span>
									</div>
								</div>
								<el-form-item label="" class="upload-box" prop="color_img_vice_middle" style="padding-left: 10px;margin-top: 20px;">
									<div class="case-img-upload">
										<!-- SKU图 -->
										<div class="case-img-upload-btns">
											<el-upload ref="upload" :file-list="skuImageListPreview" :limit="maxUpimage" action="fakeaction"
											 :show-file-list="false" :http-request=" function(res) { return upload(res, 0); } " accept="image/*">
												<el-button type="primary" size="small">上传图片</el-button>
											</el-upload>
											<el-button type="danger" size="small" @click="restImg('sku')">重置</el-button>
											<div class="el-upload__tip">
												<p style="color: red;">(可以传{{ colorList.length }}张图)</p>
												800*800像素<500KB </div> </div> <div class="case-img-upload-imgs">
													<div v-for="(data, index) in colorList" :key="index" class="vice_big_box">
														<el-image :preview-src-list="skuImageList" :src="skuImageList[index]" fit="contain">
															<div slot="error" class="image-slot"></div>
														</el-image>
													</div>
											</div>
										</div>
								</el-form-item>
							</el-form>
						</div>

						<div class="add" style="display: flex;justify-content: center;padding: 20PX 0;">
							<el-button type="primary" @click="CreateSku('goodsInfo')">添加sku</el-button>
						</div>
					</div>
					<p class="title" v-if="newSkuLists.length != 0">新增sku信息</p>
					<el-table :data="newSkuLists" border class="factory-table" v-if="newSkuLists.length != 0">
						<el-table-column label="序号" align="center" prop="id" width="80"></el-table-column>
						<el-table-column label="sku款号" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.store_goods_sku_sn" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="规格" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.color" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="图片" align="center" width="80">
							<template slot-scope="scope">
								<ImgPopover :src="scope.row.img"></ImgPopover>
							</template>
						</el-table-column>
						<el-table-column label="自营价" align="center">
							<template slot-scope="scope">
								<el-input v-model.trim="scope.row.self_price" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="零售价" align="center">
							<template slot-scope="scope">
								<el-input v-model.trim="scope.row.retail_price" type="number" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="活动价" align="center" v-if="goodsInfo.goods_type == 4">
							<template slot-scope="scope">
								<el-input v-model.trim="scope.row.activity_price" type="number" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="保险" align="center" width="100">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.is_insure" :active-value="1" :inactive-value="0"></el-switch>
							</template>
						</el-table-column>
						<el-table-column label="库存" align="center">
							<template slot-scope="scope">
								<el-input v-model.trim="scope.row.number" type="number" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" width="80">
							<template slot-scope="scope">
								<el-button type="danger" size="mini" @click="delSku(0, scope.$index)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<p class="title" style="margin-top: 10px;" v-if="skuLists.length != 0">原sku信息</p>
					<el-table :data="skuLists" border class="factory-table" v-if="skuLists.length != 0">
						<el-table-column label="序号" align="center" prop="store_goods_sku_id" width="80"></el-table-column>
						<el-table-column label="sku款号" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.store_goods_sku_sn" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="规格" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.color" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="图片" align="center" width="80">
							<template slot-scope="scope">
								<ImgPopover :src="scope.row.img"></ImgPopover>
							</template>
						</el-table-column>
						<el-table-column label="自营价" align="center">
							<template slot-scope="scope">
								<el-input v-model.trim="scope.row.self_price" type="number" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="零售价" align="center">
							<template slot-scope="scope">
								<el-input v-model.trim="scope.row.retail_price" type="number" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="活动价" align="center" v-if="goodsInfo.goods_type == 4">
							<template slot-scope="scope">
								<el-input v-model.trim="scope.row.activity_price" type="number" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="保险" align="center" width="100">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.is_insure" :active-value="1" :inactive-value="0"></el-switch>
							</template>
						</el-table-column>
						<el-table-column label="库存" align="center">
							<template slot-scope="scope">
								<el-input v-model.trim="scope.row.number" type="number" placeholder=""></el-input>
							</template> </el-table-column>
						<el-table-column label="操作" align="center" width="80">
							<template slot-scope="scope">
								<el-button type="danger" size="mini" @click="delSku(1, scope.$index, scope.row.store_goods_sku_id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="goods-image">
						<el-form :model="imageForm" status-icon :rules="imageRules" ref="imageForm" label-width="100px">
							<p class="title" style="font-size: 20px;margin-top: 20px;">商品图片</p>
							<div class="case_upload clearfix">
								<el-col :span="6">
									<el-form-item label="上传主图:" class="upload-box" prop="major_img_big">
										<div class="case-img-upload">
											<div class="case-img-upload-btns">
												<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 1); } ">
													<el-button type="primary" size="small">上传图片</el-button>
												</el-upload>
												<div class="el-upload__tip">800*800像素<500KB</div> </div> <div class="case-img-upload-imgs">
														<el-image :src="imageForm.major_img_big">
															<div slot="error"></div>
														</el-image>
												</div>
											</div>
									</el-form-item>
								</el-col>
								<el-col :span="18">
									<el-form-item label="上传附图(最多4张):" class="upload-box" prop="vice_img_vice_middle">
										<div class="case-img-upload">
											<div class="case-img-upload-btns">
												<el-upload ref="upload" :file-list="vice_img_vice_preview" :limit="4" action="fakeaction" :show-file-list="false"
												 :http-request=" function(res) { return upload(res, 2); } " multiple accept="image/*">
													<el-button type="primary" size="small">上传图片</el-button>
												</el-upload>
												<el-button type="danger" size="small" @click="restImg('vice')">重置</el-button>
												<div class="el-upload__tip">800*800像素<500KB</div> </div> <div class="case-img-upload-imgs">
														<el-image v-if="!vice_img_vice_middle.length">
															<div slot="error"></div>
														</el-image>
														<div v-for="(data, index) in vice_img_vice_middle" :key="index" class="vice_big_box" v-else>
															<i class="el-icon-error" @click="delVice(index, 1)"></i>
															<el-image :preview-src-list="vice_img_vice_middle" :src="data" fit="contain"></el-image>
														</div>
												</div>
											</div>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="上传视频:" class="upload-box">
										<div class="case-img-upload">
											<div class="case-img-upload-btns">
												<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return uploadVideo(res); } "
												 accept="video/mp4,avi">
													<el-button type="primary" size="small">上传视频</el-button>
												</el-upload>
												<el-button type="danger" size="small" @click="restImg('video')">重置</el-button>
												<div class="el-upload__tip">小于20MB</div>
											</div>
											<div class="case-img-upload-imgs">
												<el-image v-show="!goodsInfo.video">
													<div slot="error"></div>
												</el-image>
												<div class="vice_big_box" style="width: 500px; margin-left: 25px;" v-show="goodsInfo.video">
													<video-player id="video" ref="videoPlayer" class="vjs-custom-skin" :playsinline="true" :options="playerOptions" />
												</div>
											</div>
										</div>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="上传详情图:" class="upload-box" prop="info_img">
										<VueSortableImg @change="getInfoImg" :list="info_img"></VueSortableImg>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item></el-form-item>
								</el-col>
							</div>
						</el-form>
					</div>
				</div>
			</el-form>
			<div class="add" style="display: flex;justify-content: center;padding: 20PX 0;">
				<el-button type="primary" @click="UploadProduct">保存并上架</el-button>
			</div>
		</el-card>
	</div>
</template>

<script>
	import md5 from 'md5';
	import ImgPopover from '@/components/ImgPopover';
	import VueSortableImg from '@/components/VueSortableImg';
	export default {
		components: {
			ImgPopover,
			VueSortableImg
		},
		data() {
			return {
				NewinfoImg:[],
				parameter: [{
					parameter_key: '',
					parameter_value: ''
				}],
				admin_id: localStorage.getItem('admin_id'),
				vice_img_vice_big: [], // 大副图
				vice_img_vice_middle: [], // 副图
				vice_img_vice_preview: [], // 副图预览
				vice_middle: [],
				vice_big: [],
				info_img: [], // 详情图
				skuImageList: [], // sku图
				skuImageListPreview: [], // sku图预览
				newSkuLists: [],
				skuLists: [],
				goodsInfo: {
					type: '1',
					store_goods_name: '',
					store_goods_sn: '',
					retail_price: '',
					num: '',
					self_price: '',
					class_id: '',
					sort: 0,
					brief: '',
					video: '',
					major_img_big: '',
					major_img_middle: '',
					major_img_thumb: '',
					major_img_small: '',
					vice_img_vice_big: '',
					vice_img_vice_middle: '',
					info_img: '',
					color_img_vice_thumb: '',
					color_img_vice_middle: '',
					color_img_vice_big: '',
					name_color: '规格',
					upimg: '',
					market_price: '',
					goods_type:'',
					activity_price:'',
					store_id: localStorage.getItem('store_id')
				},
				goodsRules: {
					store_goods_name: [{
						required: true,
						message: '必填项不能为空'
					}],
					sort: [{
						required: true,
						message: '必填项不能为空'
					}],
					type: [{
						required: true,
						message: '必填项不能为空'
					}],
					store_goods_sn: [{
						required: true,
						message: '必填项不能为空'
					}],
					number: [{
						required: true,
						message: '必填项不能为空'
					}],
					retail_price: [{
						required: true,
						message: '必填项不能为空'
					}],
					class_id: [{
						required: true,
						message: '必填项不能为空'
					}],
					brief: [{
						required: true,
						message: '必填项不能为空'
					}],
					self_price: [{
						required: true,
						message: '必填项不能为空'
					}],
					activity_price: [{
						required: true,
						message: '必填项不能为空'
					}],
					goods_type: [{
						required: true,
						message: '必填项不能为空'
					}],
				},
				imageForm: {
					info_img: '',
					major_img_big: '',
					vice_img_vice_middle: ''
				},
				imageRules: {
					info_img: [{
						required: true,
						message: '必填项不能为空'
					}],
					major_img_big: [{
						required: true,
						message: '必填项不能为空'
					}],
					vice_img_vice_middle: [{
						required: true,
						message: '必填项不能为空'
					}]
				},
				StyleList: [], // 风格
				SpaceList: [], // 空间
				TextureList: [], // 材质
				ClassList: [], // 品类
				CreateSkuForm: {
					color: '',
					name_color: '规格',
					color_img_vice_middle: ''
				},
				CreateSkuRules: {
					// size: [{
					// 	required: true,
					// 	message: '请输入尺寸'
					// }],
					// lining: [{
					// 	required: true,
					// 	message: '请输入内容'
					// }],
					color: [{
						required: true,
						message: '请输入内容'
					}],
					color_img_vice_middle: [{
						required: true,
						message: '请上传图片'
					}]
				},
				colorList: [{
					value: ''
				}],
				playerOptions: {
					playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
					autoplay: false, // 如果true,浏览器准备好时开始回放。
					preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{
						type: 'video/mp4',
						src: ''
					}],
					hls: true,
					poster: '', // 你的封面地址
					width: '500px', // 播放器宽度
					notSupportedMessage: '此视频暂无法播放，请稍后再试'
				},
				maxUpimage: 1,
				goodsTypeList: [{
						value: 1,
						label: '普通商品'
					},
					{
						value: 4,
						label: '秒杀商品'
					},
				],
			};
		},
		watch: {
			'colorList.length': function(val) {
				this.maxUpimage = this.colorList.length;
				console.log(this.colorList.length);
			},
			colorList: {
				handler: function(newVal) {
					this.CreateSkuForm.color = newVal[0].value;
				},
				deep: true
			},
		},
		methods: {
			getInfoImg(info_img){
				this.NewinfoImg = info_img
				this.imageForm.info_img = info_img;
			},
			init() {
				let data = {
					paramter: 1,
					store_goods_id: this.$route.query.id,
					store_id: localStorage.getItem('store_id')
				};
				this.$http(this.$ApiList.StoreGoodsInfo, data).then(res => {
					let goodsInfo = res.datas;
					if (goodsInfo.sku.length != 0) {
						goodsInfo.sku.forEach(item => {
							item.id = item.sku_id;
							this.skuLists.push(item);
						});
					}
					if(goodsInfo.parameter_list){
						this.parameter = goodsInfo.parameter_list
					}
					this.goodsInfo.store_goods_id = this.$route.query.id;
					this.goodsInfo.store_goods_name = goodsInfo.store_goods_name;
					this.goodsInfo.brief = goodsInfo.brief;
					this.goodsInfo.store_goods_sn = goodsInfo.store_goods_sn;
					this.goodsInfo.num = goodsInfo.num;
					this.goodsInfo.sort = goodsInfo.sort;

					this.goodsInfo.self_price = goodsInfo.self_price;
					this.goodsInfo.retail_price = goodsInfo.retail_price;
					this.goodsInfo.market_price = goodsInfo.market_price;

					this.goodsInfo.video = goodsInfo.video;
					this.goodsInfo.major_img_big = goodsInfo.image;
					this.imageForm.major_img_big = goodsInfo.image;
					this.goodsInfo.major_img_middle = goodsInfo.image_middle;
					this.goodsInfo.major_img_thumb = goodsInfo.image_thumb;
					this.goodsInfo.major_img_small = goodsInfo.major_img_small;
					this.goodsInfo.free_express = goodsInfo.free_express
					this.goodsInfo.goods_type  = goodsInfo.goods_type 
					this.goodsInfo.activity_price = goodsInfo.activity_price
					this.playerOptions.sources[0].src = goodsInfo.video;
					this.vice_img_vice_middle = JSON.parse(JSON.stringify(goodsInfo.vice_big));
					this.vice_img_vice_big = JSON.parse(JSON.stringify(goodsInfo.vice_big));
					goodsInfo.vice_big.forEach(item => {
						this.vice_img_vice_preview.push({
							image: item
						})
					})
					this.info_img = goodsInfo.img_info;
					this.goodsInfo.class_id = goodsInfo.class_id;
				});
			},
			getClassify() {
				let data = {
					store_id: localStorage.getItem('store_id')
				}
				this.$http(this.$ApiList.StoreGoodsClassList, data).then(res => {
					this.ClassList = res.datas
				});
			},
			// 图片上传 type 0上传sku图 1主图 2副图
			upload(params, type) {
				const file = params.file,
					isJPGPNG = file.type === 'image/jpeg' || 'image/png',
					isLt500KB = file.size / 1024 <= 500;
				if (!isJPGPNG) {
					this.$message.error('只能上传图片格式png、jpg!');
					return;
				}
				if (!isLt500KB) {
					this.$message.error('图片不能大于500K!');
					return;
				}
				const form = new FormData();
				form.append('file[]', file);
				switch (Number(type)) {
					case 0:
						this.$http(this.$ApiList.UpSkuImg, form).then(res => {
							this.skuImageList.push(res.datas[0]);
							this.skuImageListPreview.push({
								image: res.datas[0]
							});
							this.CreateSkuForm.color_img_vice_middle = this.skuImageList;
						});
						break;
					case 1:
						this.$http(this.$ApiList.mainUpload, form).then(res => {
							this.goodsInfo.major_img_big = res.datas[0].major_img_big;
							this.goodsInfo.major_img_middle = res.datas[0].major_img_middle;
							this.goodsInfo.major_img_thumb = res.datas[0].major_img_thumb;
							this.goodsInfo.major_img_small = res.datas[0].major_img_small;

							this.imageForm.major_img_big = res.datas[0].major_img_big;
						});
						break;
					case 2:
						this.$http(this.$ApiList.viceUpload, form).then(res => {
							this.vice_img_vice_middle.push(res.datas[0].vice_img_middle);
							this.vice_img_vice_big.push(res.datas[0].vice_img_big);
							this.vice_img_vice_preview.push({
								image: res.datas[0].vice_img_middle
							});
						});
						break;
				}
			},
			// 视频上传
			uploadVideo(params) {
				const file = params.file,
					isLt20MB = file.size / 1024 / 1024 < 20,
					videoType = new Array("avi","mov","mp4"),
					isVideoType = videoType.includes(file.type.substring(file.type.lastIndexOf('/')+1));
				if(!isVideoType){
					this.$message.error('只能上传视频格式！');
					return;
				}
				if (!isLt20MB) {
					this.$message.error('视频不能大于20MB！');
					return;
				}
				const form = new FormData();
				form.append('file[]', file);
				this.$http(this.$ApiList.UpVideo, form).then(res => {
					this.goodsInfo.video = res.datas;
					this.$nextTick(() => {
						this.playerOptions.sources[0].src = res.datas;
					});
				});
			},
			// 详情图上传
			upSuccess(response, file, fileList) {
				this.info_img.push(file.response.datas[0]);
			},
			remove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			// 添加 0 尺寸 1颜色 2材质
			addInput() {
				let item = {
					value: ''
				};
				this.colorList.push(item);
			},
			// 重置 0 尺寸 1颜色 2材质
			reset() {
				let item = [{
					value: ''
				}];
				this.colorList = item;
			},
			CreateSku(formName) {
				if (this.colorList.length != this.skuImageList.length) {
					this.$layer.msg('有多少个颜色就要传多少张sku图');
					return
				}
				let data = {
					name_color: this.CreateSkuForm.name_color,
					self_price: this.goodsInfo.self_price,
					retail_price: this.goodsInfo.retail_price,
					store_goods_sn: this.goodsInfo.store_goods_sn,
					number: this.goodsInfo.num,
					activity_price:this.goodsInfo.activity_price,
					market_price:this.goodsInfo.market_price
				};
				this.colorList.forEach((item, i) => {
					if (item.value != '') {
						let num = i + 1;
						let color = 'color_name_' + num;
						data[color] = item.value;
						this.CreateSkuForm.color = item.value;
					}
				});
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.$refs['CreateSkuForm'].validate(valid => {
							if (valid) {
								this.skuImageList.forEach((item, i) => {
									if (item.value != '') {
										let num = i + 1;
										let skuImage = 'color_img_vice_middle_' + num;
										data[skuImage] = item;
									}
								});
								this.$http(this.$ApiList.StoreGoodsCreateSku, data).then(res => {
									this.newSkuLists = res.datas;
								});
							} else {
								this.$layer.msg('请检查SKU信息是否完整');
							}
						});
					} else {
						this.$layer.msg('请检查商品信息是否完整');
					}
				});
			},
			// 上传商品
			UploadProduct() {
				let parameter = []
				if(this.parameter){
					this.parameter.forEach(item => {
						if (item.parameter_key != "" && item.parameter_value != "") parameter.push(item)
					});
				}
				if (parameter.length != 0) this.goodsInfo.parameter_list = JSON.stringify(parameter)
				if (this.skuLists.length == 0 && this.newSkuLists.length == 0) {
					this.$layer.msg('至少要有一个sku');
					return;
				}
				this.goodsInfo.name_color = this.CreateSkuForm.name_color;

				this.goodsInfo.info_img = this.NewinfoImg.join(',');
				this.goodsInfo.vice_img_vice_big = this.vice_img_vice_big.join(',');
				this.goodsInfo.vice_img_vice_middle = this.vice_img_vice_middle.join(',');

				this.imageForm.info_img = this.NewinfoImg.join(',');
				this.imageForm.vice_img_vice_middle = this.vice_img_vice_middle.join(',');

				this.$refs['goodsInfo'].validate(valid => {
					if (valid) {
						this.$refs['imageForm'].validate(valid => {
							if (valid) {
								if (this.newSkuLists.length != 0) {
									let data = {
										upimg: JSON.stringify(this.newSkuLists),
										store_goods_id: this.$route.query.id,
										color_name: this.CreateSkuForm.color_name,
										lining_name: this.CreateSkuForm.lining_name,
										size_name: '尺寸'
									};
									this.$http(this.$ApiList.StoreAddGoodsSku, data).then(res => {
										let skuList = [];
										if (this.skuLists.length != 0) {
											this.skuLists.forEach(item => {
												skuList.push(item);
											});
										}
										if (res.datas.length != 0) {
											res.datas.forEach(item => {
												skuList.push(item);
											});
										}
										this.goodsInfo.upimg = JSON.stringify(skuList);
										this.goodsInfo.is_sale = 1
										this.$http(this.$ApiList.UpdateStoreGoods, this.goodsInfo).then(res => {
											this.$store.dispatch('tagsView/delView', this.$route).then(({
												visitedViews
											}) => {});
											this.$router.push({
												path: '/store_goods_list'
											});
										});
									});
								} else {
									this.goodsInfo.upimg = JSON.stringify(this.skuLists);
									this.goodsInfo.is_sale = 1
									this.$http(this.$ApiList.UpdateStoreGoods, this.goodsInfo).then(res => {
										this.$store.dispatch('tagsView/delView', this.$route).then(({
											visitedViews
										}) => {});
										this.$router.push({
											path: '/store_goods_list'
										});
									});
								}

							} else {
								this.$layer.msg('请检查主图、副图、详情图是否完整');
							}
						});
					} else {
						this.$layer.msg('请检查商品信息是否完整');
					}
				});
			},
			delSku(type, index, sku_id) {
				this.$confirm('删除后不可恢复，是否确认删除?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						if (type == 0) {
							this.newSkuLists.splice(index, 1);
						} else {
							let data = {
								store_goods_sku_id: sku_id
							};
							this.$http(this.$ApiList.DelStoreSku, data).then(res => {
								this.$layer.msg('删除成功');
								this.skuLists.splice(index, 1);
							});
						}
					})
					.catch(() => {});
			},
			// 删除附图
			delVice(index, type) {
				this.$confirm('删除后不可恢复，是否确认删除?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						if (type == 1) {
							this.vice_img_vice_middle.splice(index, 1);
							this.vice_img_vice_big.splice(index, 1);
							this.vice_img_vice_preview.splice(index, 1);
						} else {
							this.info_img.splice(index, 1);
						}
					})
					.catch(() => {});
			},
			// 重置图片
			restImg(type) {
				switch (type) {
					case 'sku':
						this.skuImageList = [];
						this.skuImageListPreview = [];
						break;
					case 'vice':
						this.vice_img_vice_middle = [];
						this.vice_img_vice_big = [];
						this.vice_img_vice_preview = [];
						break;
					case 'infoImg':
						this.info_img = [];
						break;
					case 'video':
						this.goodsInfo.video = '';
						break;
				}
			},
			getSign() {
				let data = this.upImage;
				// 获取签名开始
				let obj = 'jjds2020+';
				let newObj = this.objKeySort(data);
				for (let i in newObj) {
					obj += i + '=' + newObj[i] + '&';
				}
				obj = obj.substring(0, obj.length - 1);
				obj += '+jjds2020';
				obj = md5(obj);
				obj = obj.toUpperCase();
				// 获取签名结束
				this.upImage.sign = obj;
			},
			// 参数排序
			objKeySort(obj) {
				var newkey = Object.keys(obj).sort();
				var newObj = {};
				for (var i = 0; i < newkey.length; i++) {
					newObj[newkey[i]] = obj[newkey[i]];
				}
				return newObj;
			},
			addParameter() {
				let item = {
					parameter_key: '',
					parameter_value: ''
				}
				this.parameter.push(item)
			},
			delParameter(index) {
				this.parameter.splice(index, 1)
			},
			onUpPrice(type,e){
				this.skuLists.map(item=>{
					if(type === 'activity'){
						this.$set(item,'activity_price',e)
					}else if(type === 'market'){
						this.$set(item,'market_price',e)
					}else if(type === 'retail'){
						this.$set(item,'retail_price',e)
					}else if(type === 'self'){
						this.$set(item,'self_price',e)
					}
				})
				this.newSkuLists.map(item=>{
					if(type === 'activity'){
						this.$set(item,'activity_price',e)
					}else if(type === 'market'){
						this.$set(item,'market_price',e)
					}else if(type === 'retail'){
						this.$set(item,'retail_price',e)
					}else if(type === 'self'){
						this.$set(item,'self_price',e)
					}
					
				})
			},
			onSetActivityPrice(e){
				if(e === 4){
					this.skuLists.map(item=>{
						if(!item.activity_price){
							this.$set(item,'activity_price',this.goodsInfo.activity_price)
						}
					})
					this.newSkuLists.map(item=>{
						if(!item.activity_price){
							this.$set(item,'activity_price',this.goodsInfo.activity_price)
						}
					})
				}
			}
		},
		created() {
			this.init();
			this.getClassify();
		}
	};
</script>

<style lang="scss">
	.add-goods .main-image .el-upload {
		background-color: #fbfdff;
		border: 1px dashed #c0ccda;
		border-radius: 6px;
		box-sizing: border-box;
		width: 148px;
		height: 148px;
		cursor: pointer;
		line-height: 146px;
		vertical-align: top;
	}

	.add-goods .main-image .el-upload .el-icon-plus {
		font-size: 28px;
		color: #8c939d;
	}

	.add-goods .detail-image .el-upload-list--picture .el-upload-list__item {
		height: auto;
	}

	.add-goods .detail-image .el-upload-list__item img {
		width: 100%;
		height: 100%;
	}

	.add-sku-form .el-form-item {
		margin-bottom: 0 !important;
	}

	.add-sku-form .el-form-item__content {
		margin-left: 0 !important;
	}

	.add-sku-form-item {
		display: flex;
	}

	.add-sku-form-menu {
		min-width: 100px;
	}

	.add-sku-form-menu span {
		display: inline-block;
		margin-left: 10px;
		line-height: 60px;
		color: #00a0e9;
		cursor: pointer;
	}

	.add-sku-form .el-input {
		width: 200px;
		margin-left: 10px;
		margin-top: 10px;
	}

	.add-goods .detail-image .el-upload-list--picture .el-upload-list__item {
		height: auto;
		width: 950px;
	}

	.add-goods .detail-image .el-upload-list__item img {
		width: 900px;
		height: 100%;
	}

	.add-goods .el-form-item__content {
		max-width: 845px;
	}

	.add-goods {
		.el-select {
			width: 100%;
		}

		.last {
			margin-bottom: 0;
		}

		.upload-drag {
			.el-upload {
				vertical-align: top;
			}

			.el-upload__tip {
				line-height: normal;
			}
		}

		.case_upload {
			display: flex;
			flex-wrap: wrap;

			.el-col {}
		}

		.el-select {
			display: block;
		}

		.upload-box {
			padding-left: 40px;

			.case-img-upload {
				display: flex;

				.case-img-upload-imgs {
					flex: 1;
					align-items: flex-start;

					.el-image {
						width: 140px;
						height: 140px;
						border: solid 1px #e5e5e5;
						margin-left: 25px;
						vertical-align: top;
					}
				}

				.case-img-upload-imgs-info {
					width: 100%;
					max-width: 660px;
					border: solid 1px #e5e5e5;
					margin-left: 25px;
					min-height: 390px;

					.case-img-upload-imgs-info-box {
						position: relative;

						.el-icon-error {
							position: absolute;
							font-size: 20px;
							color: #ef3030;
							right: 5px;
							top: 5px;
							z-index: 1;
							background-color: #fff;
							border-radius: 50%;
							cursor: pointer;
						}
					}

					.el-image {
						width: 100%;
						vertical-align: top;
					}
				}

				.vice_big_box {
					position: relative;
					display: inline-block;
					vertical-align: top;
					margin-bottom: 20px;

					.el-icon-error {
						position: absolute;
						font-size: 20px;
						color: #ef3030;
						right: 5px;
						top: 5px;
						z-index: 1;
						background-color: #fff;
						border-radius: 50%;
						cursor: pointer;
					}
				}
			}

			.el-upload__tip {
				width: 80px;
				text-align: center;
			}

			.el-form-item__label {
				float: none;
			}

			.el-form-item__content {
				margin-left: 0 !important;

				.el-button--danger {
					width: 80px;
					background-color: #37c1d6;
					border-color: #37c1d6;
				}
			}
		}
	}

	.add-goods .el-input__inner {
		padding: 0 10px;
	}

	.more-parameter {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 20px;

		.parameter-item {
			display: flex;
			width: 300px;

			span {
				line-height: 102px;
				font-size: 30px;
			}
		}
	}

	.more-parameter-title {
		margin-top: 20px;
		display: flex;

		p {
			line-height: 30px;
			font-size: 20px;
		}

		.title {
			margin-right: 20px;
		}

		.el-icon-circle-plus-outline {
			font-size: 30px;
		}
	}
</style>
